<div class="page-title page-title-container" data-bind="visible: currentPage() != '1'">
    <img src="svg_img/phonelink_black.svg"> 
    <h1 data-trans='station_info'></h1>
    <p data-trans="station_info_sub_title"></p>
</div>
<div class="page-title page-title-container" data-bind="visible: currentPage() == '1'">
    <img src="svg_img/parent_settings.svg" style="margin-top: -4px;"> 
    <h1 data-trans='parental_control'></h1>
</div>

<div id="innerContainer">
    <div id="station_info_div" data-bind="visible: currentPage() == '0'">
        <div id="wireless_div" class="table-container">
            <div class="form-title clearfix">
                <div class="float-start">
                    <h6 data-trans="wireless_access_device"></h6>
                </div>
                <div class="float-end table-count-container">
                    <span data-trans="devices_num"></span>
                    <span data-bind="text: wirelessCount"></span>
                </div>
            </div>
            <div class="content" style="padding: 2.5rem 0  0.5rem 0;" data-bind="visible: wirelessCount() == '0' ">
                    <div style="text-align:center" class="mb-4">
                            <img src="./img/img_empty_nodevice.png?v=1736213398713" />
                    </div>
                    <div class="mb-4">
                        <p style="text-align:center; max-width:400px; margin: 0 auto;"  data-trans="no_devices"></p>
                    </div>				
            </div>
            <table class="table table-hover devcie-table">
                    <tbody data-bind="foreach:deviceInfo">
                        <tr>
                            <td>
                               <div class="row" style="padding: 0.75rem 0;">
                                    <div class="device-img">
                                        <img data-bind="attr: {src: isManaged ? './img/router_phone.png?v=1736213398713' : './img/router_phone.png?v=1736213398713'}"
                                            height="56" />
                                    </div>
                                    <div class="device-container row">
                                        <div>
                                            <span data-bind="text: hostName" style="word-break:break-all;"></span>&nbsp&nbsp
                                            <a data-bind="click: $root.editHostNameHandler" class="cursorhand">
                                                <img class="icon-action" src="./svg_img/note.svg" height="24">
                                            </a>
                                        </div>
                                        <div class="col-md-9 col-xl-10 row" style="color:rgb(0,0,0,.54); font-size:14px;">
                                            <div class="width-xl-100 col-md-5 col-6 hide">
                                                <span class="arrow-font">↑&nbsp</span><span data-bind="text: ULSpeed"></span>
                                            </div>
                                            <div class="width-xl-100 col-md-7 col-6 hide" >
                                                <span class="arrow-font">↓&nbsp</span><span data-bind="text: DLSpeed"></span>
                                            </div>
                                            <div class="width-xl-240 col-md-5">
                                                <span data-trans="ip_address"></span>:&nbsp<span data-bind="text: ipAddress"></span>
                                            </div>
                                            <div class="width-xl-260 col-md-7">
                                                <span data-trans="mac_address"></span>:&nbsp<span data-bind="text: macAddress"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xl-2 device-action">
                                            <a data-bind="attr: {id: 'bindIP_text_'+idx}, click: $root.bindingIpHandler , visible: isBndip" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-placement="top" data-tooltip-trans="binding_ip" class="tooltip-origin">
                                                <img class="icon-action" src="./svg_img/ip_link.svg" height="24">
                                            </a> 
                                            <a data-bind="attr: {id: 'bindIP_text_'+idx}, click: $root.cancelBindIpHandler, visible: isCancelBndip" data-bs-toggle="tooltip"  data-bs-custom-class="custom-tooltip"data-bs-placement="top" data-tooltip-trans="cancel_binding_ip" class="tooltip-origin">
                                                <img class="isBndip" src="./svg_img/ip_link.svg" height="24">
                                            </a> 
                                            <a data-bind="visible: !inBlackGroup && $root.macFilterEnableOri() == 2, click: $root.wirelessBlockHandler" data-bs-toggle="top" data-bs-placement="top" data-tooltip-trans="black_list" class="tooltip-origin">
                                                <img class="icon-action" src="./svg_img/block_list.svg" height="24">
                                            </a>
                                            <!-- <span style="color:#0f87f7;" data-bind="visible: $root.macFilterEnableOri() == 1">(Own)</span>  -->
                                        </div>
                                        
                                     </div>
                               </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

        </div>
    </div>
    <div id="pc_page2"  class="" data-bind="visible: currentPage() == '1'">
        <div class="row table-container" >
            <button type="button" class="btn-close station-info-back" aria-label="Close" data-bind="click:backToMainHandler"></button>
            <div class="device-img">
                <img src="./img/router_windows.png?v=1736213398713" height="56" />
            </div>
            <div class="device-container row">
                <div>
                    <span data-bind="text: hostname" style="word-break:break-all;"></span>&nbsp&nbsp
                    <a data-bind="click: $root.editHostNameHandler" class="cursorhand">
                        <img class="icon-action" src="./svg_img/note.svg" height="24">
                    </a>
                </div>
                <div class="col-md-9 col-xl-10 row" style="color:rgb(0,0,0,.54); font-size:14px;">
                    <div class="width-xl-100 col-md-5 col-6">
                        <span class="arrow-font">↑&nbsp</span><span data-bind="text: ULSpeed"></span>
                    </div>
                    <div class="width-xl-100 col-md-7 col-6" >
                        <span class="arrow-font">↓&nbsp</span><span data-bind="text: DLSpeed"></span>
                    </div>
                    <div class="width-xl-240 col-md-5">
                        <span data-trans="ip_address"></span>:&nbsp<span data-bind="text: ip_address"></span>
                    </div>
                    <div class="width-xl-260 col-md-7">
                        <span data-trans="mac_address"></span>:&nbsp<span data-bind="text: mac_addr"></span>
                    </div>
                </div>
            </div>
        </div>  

        <div class="row table-container"> 
            <div class="form-title">
				<h6 data-trans="restricted_time_list"></h6>
			</div>
            <div class="content" data-bind="visible: rules() != '0'">
                <form id="childAccessTimeFrm">
                    <div class = "table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <!-- <th width="50" data-trans="station_number"></th> -->
                                    <th width="300" data-trans="time"></th>
                                    <th width="350" data-trans="restricted_access_time_repeat"></th>
                                    <th width="300" data-trans="restricted_time_status"></th>
                                    <th width="" data-trans="pc_action"></th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: childAccessTimeList">
                                <tr data-bind="css: {odd: $index() % 2 == 0, even: $index() % 2 != 0}">
                                    <!-- <td data-bind="text: $index()+1"></td> -->
                                    <td style="white-space:nowrap;">
                                        <span data-bind="text: timeRange, attr: {id: 'access_time_txt_'+$index()}"></span>
                                    </td>
                                    <td>
                                        <span data-bind="text:weekText,attr: {id: 'access_week_txt_'+$index(),transId:weekTextTrans}"></span>
                                    </td>
                                    <td style="white-space:nowrap;">
                                        <a href="javascript: void(0)" class="restricted_time_active_btn"
                                            data-bind="click: $root.activeChildAccessTimeHandler , css: {'active_btn_on': enableStatus== 1, 'active_btn_off': enableStatus != 1},attr: {id: 'restricted_time_active_btn_'+$index()}"></a>
                                    </td>
                                    <td style="white-space:nowrap;">
                                        <div data-bind="attr: {id: 'access_time_txtBtnDiv_'+$index()}">
                                            <a data-bind="click: $root.editChildAccessTimeHandler">
                                                <img class="icon-action" src="./svg_img/note.svg" height="24">
                                            </a>
                                            <a style="margin-left:0.5rem;" data-bind="click: $root.removeChildAccessTimeHandler">
                                                <img class="icon-action" src="./svg_img/delete.svg" height="24">
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="content mt-4" data-bind="visible: rules() == 0">
                    <div class="row mb-3mt-3">
                        <div class="col-12 text-center">
                            <div>
                                <img src="./img/img_norule.png?v=1736213398713">
                            </div>
                            <div class="mt-3">
                                <span class="no_rule" data-trans="no_rule"></span>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="form-buttons">
                    <input type="button" class="btn btn-primary" data-bind='click: addNewAccessTimeRule'
                        data-trans='add_new' />
                    <input type="button" class="btn btn-primary" data-bind='click: clearAccessTimeRules'
                        data-trans='clear' />
            </div>
        </div>
    </div>

</div>

<div id="editHostNameModel" class="modal modal-md" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" data-trans="Edit"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="saveHostNameForm">
                        <div class="row">
                            <label class="col-12" style="width: 130px;" data-trans="host_name"></label>
                                <div class="col-12 col-sm-8">
                                    <input type="text" name="device_name" data-bind="value: device_name" id="device_name"
                                            class="required deviceNameCheck form-control" maxlength="32" />
                                </div>
                        </div>
                </form>   
            </div>
            <div class="modal-footer center-button">
                <input type="button" class="btn btn-primary" data-trans="save" data-bind="click: saveHostName"/>
            </div>
        </div>
    </div>
</div>

<div id="addNewAccessTimeRule" class="modal modal-md" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" data-trans="add_new" data-bind="visible: isAddNew"></h5>
                    <h5 class="modal-title" data-trans="edit" data-bind="visible: !isAddNew()"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="saveAccessTimeRule">
                        <div class="row mt-3">
                            <label class="col-12 col-sm-2 col-form-label" data-trans="time"></label>
                            <div class="row col-12 col-sm-10">
                                <div class="time-select">
                                    <select class="form-control form-select valid" data-bind="options: Hours, value: startHour, optionsText: 'text', optionsValue: 'value'"></select>
                                </div>
                                <span class="colon-gap">:</span>
                                <div class="time-select">
                                    <select class="form-control form-select valid" data-bind="options: Minutes, value: startMinute, optionsText: 'text', optionsValue: 'value'"></select>
                                </div>
                                <span class="colon-gap">-</span>
                                <div class="time-select">
                                    <select class="form-control form-select valid" data-bind="options: Hours, value: endHour, optionsText: 'text', optionsValue: 'value'"></select>
                                </div>
                                <span class="colon-gap">:</span>
                                <div class="time-select">
                                    <select class="form-control form-select valid" data-bind="options: Minutes, value: endMinute, optionsText: 'text', optionsValue: 'value'"></select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <label class="col-12 col-sm-2 col-form-label" data-trans="restricted_access_time_repeat"></label>
                            <div  class="row col-12 col-sm-10">
                                <ul class="week-ul">
                                    <li class="week-li" id="week0" data-trans="sun" data-bind="css: {'-active': week0}"></li>
                                    <li class="week-li" id="week1" data-trans="mon" data-bind="css: {'-active': week1}"></li>
                                    <li class="week-li" id="week2" data-trans="tues" data-bind="css: {'-active': week2}"></li>
                                    <li class="week-li" id="week3" data-trans="wed" data-bind="css: {'-active': week3}"></li>
                                    <li class="week-li" id="week4" data-trans="thur" data-bind="css: {'-active': week4}"></li>
                                    <li class="week-li" id="week5" data-trans="fri" data-bind="css: {'-active': week5}"></li>
                                    <li class="week-li" id="week6" data-trans="sat" data-bind="css: {'-active': week6}"></li>
                                </ul>
                            </div>
                        </div>
                    </form>   
                </div>
                <div class="modal-footer center-button">
                    <input type="button" class="btn btn-primary" data-trans="save"  data-bind="click: saveChildAccessTimeHandler"/>
                </div>
            </div>
        </div>
</div>

<div id="addMacIpModel" class="modal modal-md" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" data-trans="add_new"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bindMACIPContentFrm">
                    <div class="row mb-3">
                        <label class="col-12 col-sm-4 col-form-label" for="txtMacAddress" data-trans="mac_address"></label>
                        <div class="col-12 col-sm-8">
                            <input type="text" name="txtMacAddress" data-bind="value: mac_addr" id="txtMacAddress" class="required form-control" maxlength="20"
                            />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-12 col-sm-4 col-form-label" for="txtIpAddress" data-trans="ip_address"></label>
                        <div class="col-12 col-sm-8">
                            <input type="text" name="txtIpAddress" data-bind="value: ip_address" id="txtIpAddress" class="required form-control" maxlength="15"
                            />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer center-button">
                <input type="button" class="btn btn-primary" data-trans="save" data-bind="click: saveNewMacIp" />
            </div>
        </div>
    </div>
</div>
